<template>
  <view class="container">
    <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo" />
    <view class="main-info" :style="[
        {'background-image':(`url(${staticImgs.firstImg})`)}
      ]">
      
      <DanmuComp bg="rgba(19, 180, 199, 1)"/>
      
      <view class="row-1" :style="[
          {'background-image':(`url(${staticImgs.infoBoxBg})`)}
        ]">
        <view class="name">{{sclInfo.sclName}}</view>
        <view class="intro">{{sclInfo.summary}}</view>
        <view class="nums-info-wrapper">
          <view class="num-box" v-if="extraInfo.qstnCount">
            <view class="row-1">精选问题</view>
            <view class="row-2">
              <text class="num">{{extraInfo.qstnCount}}</text>
              <text class="text">题</text>
            </view>
          </view>
          
          <view class="num-box" v-if="extraInfo.testTimesNum.num">
            <view class="row-1">测试约需</view>
            <view class="row-2">
              <text class="num">{{extraInfo.testTimesNum.num}}</text>
              <text class="text">{{extraInfo.testTimesNum.unit}}</text>
            </view>
          </view>

          <view class="num-box" v-if="extraInfo.sclPageSize">
            <view class="row-1">专业报告</view>
            <view class="row-2">
              <text class="num">{{extraInfo.sclPageSize}}</text>
              <text class="text">页</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="row-2">
        <view class="left-box">
          <view class="coupon-box" v-if="isShowPrice && showCouponBox" :style="[
              {'background-image':(`url(${couponInfo.bg})`)},
              {'color':couponInfo.color}
            ]">
            {{ couponInfo.text }}
          </view>
      
          <view class="si-price" v-if="isShowPrice">
            <template v-if="sclInfo.discountType">
              <view class="price-block-wrapper">
                <view class="row-1">
                  <view class="now-price-box">
                    <text class="unit">¥</text>
                    <text class="price">{{discountedPrice}}</text>
                  </view>
                  <view class="price-wrapper">
                    <view class="price-text">原价</view>
                    <view class="price-box">
                      <text class="unit">¥</text>
                      <text class="price">{{currentPrice}}</text>
                    </view>
                  </view>
                </view>
              </view>
      
            </template>
            <template v-else-if="currentPrice>0">
              <!-- 默认显示 -->
              <view class="price-block-wrapper">
                <view class="row-1">
                  <view class="now-price-box">
                    <text class="unit">¥</text>
                    <text class="price">{{currentPrice}}</text>
                  </view>
                </view>
              </view>
            </template>
          </view>
      
      
        </view>
        <view class="right-box">
          <view class="view-num">
            <image :src="staticImgs.teamIcon" class="test-num" mode=""></image>
            {{sclInfo.collectNums || 0}}次
          </view>
        </view>
      </view>
      

      <!-- <view class="row-3" @click="startScl()">
          <image  class="img" :src="staticImgs.startBtn" mode=""></image>
      </view> -->
    </view>
    <view class="intro-img-wrapper" v-for="(item,index) in staticImgs.introArr" :key="index">
      <image class="img" :src="item" mode="widthFix"></image>
    </view>
    

    
    <!-- v-if="showFixedBtn" -->
    <view  class="abs-start-btn" @click="startScl()">
        <image  class="img" :src="staticImgs.startBtn" mode=""></image>
    </view>
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  
  import DanmuComp from './danmu-comp.vue'
  const appData = getApp();
  let timmer = null;
  export default {
    components:{
      navigationBar,
      DanmuComp
    },
    props: {
      sclInfo: {
        type: Object,
        default: () => {}
      },
      extraInfo: {
        type: Object,
        default: () => {}
      },
      showPrivacyTip: {
        type: Boolean,
        default: false
      },
      isShowPriceWrapper: {
        type: Boolean,
        default: false
      },
      isFromEshopLink: {
        type: Boolean,
        default: false
      },
      scrollTopNum: {
        type: Number,
        default: 0
      },
    },
    data() {
      return {
        
        navigationBarDataInfo: {
          "bg_color": "#fff",
          "color": "#333",
          "flag": 1,
          "name": "斯坦福智商测试",
          "hasEntity": true,
        },
        staticImgs: {
          firstImg: this.imgBaseURL + '/scl/introduce/sbis/img-1.jpg',
          introArr: [
            this.imgBaseURL + '/scl/introduce/sbis/img-2.jpg',
            this.imgBaseURL + '/scl/introduce/sbis/img-3.jpg',
            this.imgBaseURL + '/scl/introduce/sbis/img-4.jpg',
            this.imgBaseURL + '/scl/introduce/sbis/img-5.jpg',
            this.imgBaseURL + '/scl/introduce/sbis/img-6.jpg',
            this.imgBaseURL + '/scl/introduce/sbis/img-7.jpg',
            this.imgBaseURL + '/scl/introduce/sbis/img-8.jpg',
          ],
          couponBg_1: this.imgBaseURL + '/scl/introduce/sbis/coupon-bg-1.png',
          couponBg_2: this.imgBaseURL + '/scl/introduce/sbis/coupon-bg-2.png',
          couponBg_3: this.imgBaseURL + '/scl/introduce/sbis/coupon-bg-3.png',
          infoBoxBg: this.imgBaseURL + '/scl/introduce/sbis/box-bg.png',
          startBtn: this.imgBaseURL + '/scl/introduce/sbis/start-btn.png',
          teamIcon: this.imgBaseURL + '/scl/introduce/sbis/team-icon.png',
        },
        viewPrice: 0,
        price: 0,
        showFixedBtn:false,
        windowHeight: 99999,

      }
    },
    watch: {
      sclInfo: {
        handler(val) {
          if (val) {
            this.initCompData(val)
          }
        },
        immediate: true
      },
      scrollTopNum(val) {
        this.showFixedBtn = val > this.windowHeight
      }
    },
    mounted() {
      const that = this
      uni.getSystemInfo({
        success(res) {
          that.windowHeight = res.windowHeight / res.devicePixelRatio
        }
      })

    },
    beforeDestroy() {
      // clearInterval(timmer)
    },
    computed: {
      isShowPrice() {
        return this?.sclInfo?.newOriginalPrice > 0 && this.isShowPriceWrapper
      },
      showCouponBox() {
        return this.sclInfo?.discountType || this.sclInfo?.newOriginalPrice === 0
      },
      discountedPrice() {
        return this.sclInfo?.discountPrice
      },
      currentPrice() {
        return this.sclInfo?.newOriginalPrice
      },
      
      couponInfo() {
        if (this.sclInfo?.newOriginalPrice === 0) {
          return {
            bg: this.staticImgs.couponBg_2,
            text: '限时免费',
            color: '#fff'
          }
        } else if (this.sclInfo?.discountType) {
          const tmpObj = {
            '1': {
              bg: this.staticImgs.couponBg_3,
              text: this.sclInfo?.discount + '折优惠',
              color: '#012519'
            },
            '4': {
              bg: this.staticImgs.couponBg_1,
              text: '1元测',
              color: '#fff'
            }
          }
          return tmpObj[this.sclInfo?.discountType]
        } else {
          return {}
        }
      }
    },
    methods: {
      startScl(){
        this.$emit('startScl')
      },
      initCompData(val) {
        const {
          detailInfo
        } = val
        const tmpObj = JSON.parse(detailInfo || '{}')
        

        this.viewPrice = val?.discountUid ? val.discountPrice : val.newOriginalPrice
        this.price = val.newOriginalPrice
      },
      startScl() {
        this.$emit('startScl')
      },
      backHandle() {
        this.$emit('backHandle')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    max-width: 100vw;
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #20287a;
  }

  .main-info {
    height: 644rpx;
    width: 750rpx;

    background-size: 100% 100%;
    background-repeat: no-repeat;

    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;


    >.row-2 {
      display: flex;
      justify-content: space-between;
      height: fit-content;
      width: 100%;
      box-sizing: border-box;
      padding: 0 45rpx;
      align-items: flex-end;

      .left-box {
        .si-price{
          margin-top: 12rpx;
        }
        .coupon-box {
          background-size: 100% 100%;
          height: 40rpx;
          width: 120rpx;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          line-height: 40rpx;
          text-align: center;
          font-style: normal;

        }

        .price-block-wrapper {
          display: flex;
          flex-direction: column;

          .row-1 {
            display: flex;
            align-items: center;
            column-gap: 14rpx;
            height: 50rpx;

            .now-price-box {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: rgba(10, 45, 112, 1);
              line-height: 26rpx;
              text-align: left;
              font-style: normal;
            }

            .price-wrapper {
              display: flex;
              align-items: center;

              .price-text {
                font-family: PingFangSC, PingFang SC;
                font-weight: 300;
                font-size: 24rpx;
                color: rgba(10, 45, 112, 1);
                line-height: 45rpx;
                text-align: left;
                font-style: normal;

                margin-right: 4rpx;
              }

              .price-box {
                font-family: PingFangSC, PingFang SC;
                font-weight: 300;
                font-size: 24rpx;
                color: rgba(10, 45, 112, 1);
                line-height: 24rpx;
                text-align: left;
                font-style: normal;
              }

            }
          }

          //  .row-1 end        
        }

        // .price-block-wrapper end

      }

      // .left-box  end

      .right-box {
        .view-num {
          font-family: PingFangSC, PingFang SC;
          // font-weight: 300;
          font-size: 26rpx;
          color: #0A2D70;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          display: flex;
          align-items: center;

          .test-num {
            width: 26rpx;
            height: 26rpx;
          }

        }
      }


    }

    //  row-1 end

    >.row-1 {
      width: 660rpx;
      height: 258rpx;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin: 0 auto;
      margin-bottom: 30rpx;
      
      .name{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 35rpx;
        color: #333333;
        line-height: 49rpx;
        text-align: center;
        font-style: normal;
        
        margin-top: 22rpx;
      }
      
      .intro{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #016265;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
        
        margin-top: 22rpx;
        margin-bottom: 18rpx;
      }
      
      .nums-info-wrapper {
        box-sizing: border-box;

        view {
          box-sizing: border-box;
          word-break: break-all;
        }

        text {
          word-break: break-all;
        }

        display: flex;
        justify-content: space-around;
        margin-bottom: 46rpx;

        .num-box {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          // width: 228rpx;
          flex: 1;

          .row-1 {
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #2FADBE;
          }

          .row-2 {
            // margin-top: rpx;
            display: flex;
            align-items: baseline;

            .num {
              font-size: 36rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #00707F;
            }

            .text {
              font-size: 26rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #00707F;
            }
          }

          &::after {
            position: absolute;
            content: '';
            right: 0;
            top: 4rpx;
            bottom: 4rpx;
            width: 1rpx;
            background-color: #D6D8ED;
            opacity: .8;
          }

          &:last-child::after {
            display: none;
          }
        }

        //.num-box - end
      }



    }

    // row-2 end
    
    >.row-3{
      width: 506rpx;
      height: 146rpx;
      // margin: auto;
      margin-top: 26rpx;
      margin-bottom: 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -146rpx;

      z-index: 2;
      
      .img{
        width: 100%;
        height: 100%;
      }
    }

  }
  
  .abs-start-btn{
    width: 562rpx;
    height: 108rpx;
    // margin: auto;
    margin-top: 26rpx;
    margin-bottom: 0;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7vh;
    // bottom: -146rpx;/
    
    z-index: 2;
    
    .img{
      width: 100%;
      height: 100%;
    }
  }

  .intro-img-wrapper {
    display: flex;
    position: relative;

    .img {
      width: 750rpx;
    }
  }
  

  
  
</style>